From 446eb6d593b97b7d11bc779afe02fdd621d79893 Mon Sep 17 00:00:00 2001
From: zephex-alt <166333351+zephex-alt@users.noreply.github.com>
Date: Fri, 3 May 2024 04:02:21 +0000
Subject: font changes, video player changes and other minor changes

---
 src/app/kdrama/[id]/buttons.jsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

(limited to 'src/app/kdrama/[id]/buttons.jsx')

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 9f6145c..2018a1c 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -1,23 +1,21 @@
 "use client";
 import styles from "../styles/info.module.css";
 import getVideoLink from "../components/videoLink";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { MediaPlayer, MediaProvider } from "@vidstack/react";
-import "@vidstack/react/player/styles/base.css";
-import "@vidstack/react/player/styles/plyr/theme.css";
+import "@vidstack/react/player/styles/default/theme.css";
+import "@vidstack/react/player/styles/default/layouts/video.css";
 import {
-	PlyrLayout,
-	plyrLayoutIcons,
-} from "@vidstack/react/player/layouts/plyr";
+	defaultLayoutIcons,
+	DefaultVideoLayout,
+} from "@vidstack/react/player/layouts/default";
 
 export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 	const [videoLink, setVideoLink] = useState(null);
-	const [episode, setEpisode] = useState("");
 
 	async function test(a, b, episodeText) {
 		let link = await getVideoLink(a, b);
 		setVideoLink(link);
-		setEpisode(episodeText);
 	}
 
 	return (
@@ -32,7 +30,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 								onClick={(event) => {
 									test(item.id, dramaId, item.title);
 									event.currentTarget.style.backgroundColor =
-										"var(--soft-purple)";
+										"#D08770";
 								}}
 							>
 								<p>{item.title}</p>
@@ -55,7 +53,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 						<MediaPlayer
 							title="dramaPlayer"
 							src={videoLink}
-							aspectRatio="16/9"
 							load="eager"
 							className={styles.VideoPlayer}
 							playsInline
@@ -63,7 +60,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 							volume={0.8}
 						>
 							<MediaProvider />
-							<PlyrLayout icons={plyrLayoutIcons} />
+							<DefaultVideoLayout icons={defaultLayoutIcons} />
 						</MediaPlayer>
 						<button
 							className={styles.closeButton}
-- 
cgit v1.2.3